<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Test that a script can change the scale of text from very small to something visible -->
<!-- see: https://bugs.webkit.org/show_bug.cgi?id=75091 -->
<!-- If this test passes there should be 3 rows and 4 columns of "PASS" -->
<script src="../resources/text-based-repaint.js"></script>
</head>
<body onload="runRepaintAndPixelTest()">
<style> p { margin: 0; }</style>
<svg style="position: absolute; top: 0px; left: 0px; width: 500px; height: 200px">
    <g id="text1g" transform="scale(0.001)">
        <text x="0" y="50" font-size="40" fill="#080">
            PASS
            <tspan fill="#080"> PASS</tspan>
        </text>
        <foreignObject x="210" y="13" width="100" height="100">
            <body><p style="font-size: 40px; color: #080;">PASS</p></body>
        </foreignObject>
        <svg x="310" y="13" width="100" height="100">
            <text x="0" y="37" font-size="40" fill="#080">PASS</text>
        </svg>
    </g>
    <g id="text2g" transform="scale(1)">
        <text x="0" y="100" font-size="40" fill="#080">
            PASS
            <tspan fill="#080"> PASS</tspan>
        </text>
        <foreignObject x="210" y="63" width="100" height="100">
            <body><p style="font-size: 40px; color: #080;">PASS</p></body>
        </foreignObject>
        <svg x="310" y="63" width="100" height="100">
            <text x="0" y="37" font-size="40" fill="#080">PASS</text>
        </svg>
    </g>
    <g id="text3g" transform="scale(0.03)">
        <text x="0" y="150" font-size="40" fill="#080">
            PASS
            <tspan fill="#080"> PASS</tspan>
        </text>
        <foreignObject x="210" y="113" width="100" height="100">
            <body><p style="font-size: 40px; color: #080;">PASS</p></body>
        </foreignObject>
        <svg x="310" y="113" width="100" height="100">
            <text x="0" y="37" font-size="40" fill="#080">PASS</text>
        </svg>
    </g>
</svg>
<script>
    function repaintTest() {
        document.getElementById("text1g").setAttribute('transform', 'scale(1)');
        document.getElementById("text2g").setAttribute('transform', 'scale(1)');
        document.getElementById("text3g").setAttribute('transform', 'scale(1)');
    }
</script>
</body>
</html>
